/**
 * 【动手实践】：【省份城市的三级联动】
 * @type {string[]}
 */
var provinceArr = new Array("上海", "江苏", "浙江");//省份数组
var cityArr = new Array(new Array("上海市"), new Array("苏州市", "南京市", "无锡市"), new Array("杭州市", "温州市", "宁波"));//城市数组
var countryArr = [[["徐汇", "长宁", "虹口"]], [["常熟市", "张家港市", "昆山市"], ["玄武区", "建邺区", "秦淮区"], ["南长区", "北塘区", "崇安区"]], [["萧山区", "滨江区", "西湖区"], ["永嘉县", "瓯海区", "鹿城区"], ["奉化", "镇海", "江北"]]];//区域数组

/**
 * 自动创建省份下拉菜单
 * @param obj
 * @param data
 */
function createOption(obj, data) {
    for (let i = 0; i < data.length; i++) {
        var op = new Option(data[i], i);  //创建下拉菜单中的option
        obj.options.add(op);  //将选项添加到下拉菜单
    }
}

var province = document.getElementById("province");  //获取省份元素对象
createOption(province, provinceArr)
/**
 * 实现下拉菜单三级联动
 * @type {HTMLElement}
 */
//选择省份后，自动生成对应城市的下拉菜单
var city = document.getElementById("city");  //获取城市下拉菜单的元素对象
province.onchange = function () {   //为省份下拉列表添加事件
    city.options.length = 0;        //清空city下所有原有option
    createOption(city, cityArr[province.value]);
    //新增代码
    city.onchange();  //自动添加 城市对应区域 下拉菜单
};

//选择城市后，自动生成对应区域的下拉菜单
var country = document.getElementById("country");  //获取区域下拉菜单的元素对象
city.onchange = function () {    //为城市下拉列表添加事件
    country.options.length = 0;  //清空country下原有option
    createOption(country, countryArr[province.value][city.value]);
};


